<template>
    <div class="mainContents">
        <div class="leftContent">
            <div class="leftTop">
                <navBar class="navbar" :title="'集团基础数据基础'"></navBar>
                <div class="leftTopEcharts" style="display:flex;flex-flow:row nowrap;overflow:hidden;">
                    <div class="leftTopEcharts" id="leftTopEchart" style=""></div>
                </div>
            </div>
            <div class="leftCenter" ref="aaa">
                <navBar class="navbar" :title="'隐患来源统计'"></navBar>
                <div id="leftCenterEchart" style="height:100%;width:100%"></div>
            </div>
            <div class="leftBottom">
                <navBar class="navbar" :title="'隐患类型占比'"></navBar>
                <div class="leftBottomEcharts" id="leftBottomEchart"></div>
            </div>
        </div>
        <div class="centerContent">
            <div class="centerTop" id="map" style="height:46%;widgh:100%">
                
            </div>
            <div class="centerBottom" id="centerbottom" style="height:46%;width:100%">

            </div>
        </div>
        <div class="rightContent">
            <div class="rightTop">
                <navBar class="navbar" :title="'违章类别情况统计'"></navBar>
                <div class="rightTopEcharts" id="rightTopEchart" style="width:90%;height:100%"></div>
            </div>
            <div class="rightCenter">
                <navBar class="navbar" :title="'公司项目数量排行'"></navBar>
                <div class="rightCenterEcharts" id="rightCenterEchart"></div>
            </div>
            <div class="rightBottom">
                <navBar class="navbar" :title="'法规标准类型排行'"></navBar>
                <div class="rightBottomEcharts" id="rightBottomEchart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import navBar from '../components/navbar.vue'
import echarts from "echarts/lib/echarts"
import 'echarts-liquidfill/src/liquidFill.js'
import map from '../assets/china.js'
export default {
    components:{
        navBar,
    },
    data(){
        return {
            
        }
    },
    methods:{
        leftTopEchart(){
            let myChart = this.$echarts.init(document.getElementById('leftTopEchart'));
            // 设置数据源 pieData
            let pieData = [
                {
                    name: '今日隐患数量',
                    value: 9,
                },
                {
                    name: '用户数量',
                    value: 34,
                },
                {
                    name: '项目数量',
                    value: 23,
                },
            ];
            let titleArr = []; // 设置title数组----->配置echarts循环的title 
            let seriesArr = [];// 设置series数组------>配置echarts循环的series配置项

            // 此处整体逻辑是用于利用数据源的个数锦星遍历，生成几个图表
            pieData.forEach(function (item, index) {
                titleArr.push({
                    text: item.name, //主标题文本，支持使用 \n 换行。
                    left: index * 35 + 14 + '%', // title组件距离左侧的距离
                    bottom: '5%', // 距离底部的距离
                    textAlign: 'center', //文本对其方式
                    textStyle: { // 用于设置文本样式
                        fontWeight: 'normal', // 粗细
                        color: 'white', // 颜色
                        fontSize: '14', // 大小
                        textAlign: 'center', //对其方式
                    },
                });
                seriesArr.push(
                {
                    name: item.name, // 系列名称，用于tooltip的显示 legend的筛选 在setoption时 更新数据和配置项时用于指定对应的系列
                    type: 'pie', // 图表类型
                    clockWise: false, //饼图的扇形区是否以顺时针排布
                    radius: ['33%', '60%'], // 饼图的半径，参数第一个代表着内半径，第二个代表着外半径
                    itemStyle: { // 用于设置图形样式
                        normal: { // 官方API没有相对应的设置，但应该是具体有以下配置
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 内置渐变色生成器
                                {
                                    offset: 0,
                                    color: 'rgb(0,228,193)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(95,141,255)',
                                },
                                
                            ]),
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            shadowBlur: 0
                        },
                    },
                    hoverAnimation: true, // 鼠标划过动画--->放大缩小
                    center: [index * 34 + 15.5 + '%', '45%'], // 位置
                    data: [    
                        {
                            value: item.value,
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value 
                                    },
                                    position: 'center', //标签的位置
                                    show: true, //是否展示
                                    textStyle: { // 文本颜色
                                        fontSize: '14',
                                        // fontWeight: 'bold',
                                        color: '#1cc7ff',
                                    },
                                },
                            },
                        },
                        {
                            value: 50 - item.value,
                            name: 'invisible',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(2,16,61)', //图形不高亮颜色
                                },
                                emphasis: {
                                    color: 'rgb(2,16,61)',//图形高亮颜色
                                },
                            },
                        },
                    ],
                });
            });

            let option = {
                grid: { // 直角坐标系
                    left: '5%',
                    right: '2%',
                    bottom: '0%',
                    top: '0%',
                    containLabel: true, //是否显示包含坐标轴的刻度标签
                },
                //backgroundColor: 'black',   用于设置背景颜色
                title: titleArr,
                series: seriesArr,
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        },
        //水滴图
        WaterDropDiagram(){
            let myChart = this.$echarts.init(document.getElementById('leftCenterEchart'));
            let option = {
                series: [
                    {
                        type: 'liquidFill',
                        data: [0.6, 0.5, 0.4, 0.3],
                        itemStyle: {
                            shadowBlur: 0
                        },
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 3,
                                borderColor: '#156ACF',
                                shadowBlur: 20,
                            }
                        },
                        label: {
                        normal: {
                            textStyle: {
                            color: 'red',
                            insideColor: 'yellow',
                            fontSize: 40
                            }
                        }
                    },
                }]
            }
            myChart.setOption(option);
        },
        leftCenterEchart(){
            let myChart = this.$echarts.init(document.getElementById('leftCenterEchart'));
            let option = {
                tooltip: { // 提示框组件
                    trigger: 'item'
                },
                color:[ 'orange','#1dbdfb','#df2bff'], //设置颜色区分
                series: [ // 配置项
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%','60%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2,
                            borderColor: '#011949',
                        },                       
                        label:{
                            formatter:function(params){
                                return (params.data.value)/25 + "%" + '\n' + '\n' + params.data.value + "起"
                            }
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        },
        leftBottomEchart(){
            let myChart = this.$echarts.init(document.getElementById('leftBottomEchart'));
            let data = [
                { value: 3, name: '一般事故隐患' },
                { value: 2, name: '较大事故隐患' },
                { value: 1, name: '重大事故隐患' },
                { value: 4, name: '安全事件隐患' },
            ]
            let img = '';
            let option = {
                color:['yellow','orange','red','#1DBDFB'],
                graphic:{
                    elements:[
                        {
                            type: 'image',
                            z:3,
                            style:{
                                image: img,
                                width:80,
                                height:80
                            },
                            left:'center',
                            top:'center',
                            position:[50,50]
                        }
                    ]
                },
                tooltip:{
                    show:true
                },
                legend:{
                    icon:'circle',
                    textStyle:{
                        fontSize: 10,
                        color:'#fff'
                    },
                    orient:'vertical',
                    x:'left',
                    y:'bottom',
                    itemWidth: 9,
                    itemHeight:5,
                },
                toolbox:{
                    show:false
                },
                series:[
                    {
                        type:'pie',
                        clockWise:false,
                        radius:[65,50],
                        hoverAnimation:false,
                        itemStyle:{
                            borderRedius: 10,
                            borderWidth: 2,
                            borderColor: '#011949',
                        },
                        data:data
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
        rightTopEchart(){
            let pieData = [
                {name: '管理违章',value: 13},
                {name: '行为违章',value: 23},
                {name: '装置违章',value: 12}
            ]
            let titleArr = [];
            let seriesArr = [];
            let myChart = this.$echarts.init(document.getElementById('rightTopEchart'));
            pieData.forEach((item,index) =>{
                titleArr.push({
                    text: item.name, //设置文本
                    left: index * 34 +29+ '%', //设置饼图之间距离多少
                    bottom: '2%', 
                    textAlign: 'right', //设置文本对齐方式
                    textStyle:{ // 设置字体样式
                        fontWeight: 'normal',
                        color: 'white',
                        fontSize: '14',
                        textAlign: 'center',
                    }
                });
                seriesArr.push({
                    type: 'pie',
                    clockWise: false,
                    radius: ['38%','58%'],
                    left: 10 + '%',
                    itemStyle:{
                        normal:{
                            color: new echarts.graphic.LinearGradient(0,0,0,1,[
                                { offset:0, color: 'rgb(210,217,71)'},
                                { offset:0, color: 'rgb(45,163,249)'}
                            ]),
                            label: {
                                show: false
                            },
                            labelLine:{
                                show: false
                            }
                        }
                    },
                    hoverAnimation: true,
                    center: [ index * 33 +24 + '%','45%'],
                    data:[
                        {
                            value: item.value,
                            label:{
                                normal: {
                                    formatter: (params) =>{
                                        return params.value + '项'
                                    },
                                    position: 'center',
                                    show: true,
                                    textStyle: {
                                        fontSize: '14',
                                        color: '#1cc7ff'
                                    }
                                }
                            }
                        },
                        {
                            value: 50 - item.value,
                            name: 'invisible',
                            itemStyle:{
                                normal:{color:'rgb(2,16,61)'}
                            },
                            emphasis:{color:'#ffffff'}
                        }
                    ]
                });
            });
            let option = {
                grid: {
                    left: '5%',
                    right: '2%',
                    bottom: '0%',
                    top: '0%',
                    containLabel: true,// 是否包含刻度尺标签
                },
                title:titleArr,
                series:seriesArr,
            }
            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
        rightCenterEchart(){
            let myChart = this.$echarts.init(document.getElementById('rightCenterEchart'));
            let option = {
                legend: {
                    top: "20",
                    x: "center",
                    textStyle: {
                        fontSize: 16,
                        color: "rgba(101, 213, 255, 1)"
                    },
                    icon:
                        "path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z",
                    itemWidth:8, // 设置宽度
                    itemHeight:8, // 设置高度、
                    itemGap: 12 // 设置间距
                    },
                    tooltip: {
                    show: true,
                    trigger: "axis", //axis , item
                    backgroundColor: "RGBA(0, 49, 85, 1)",
                    borderColor: "rgba(0, 151, 251, 1)",
                    borderWidth: 1,
                    borderRadius: 0,
                    textStyle: {
                        color: "#BCE9FC",
                        fontSize: 16,
                        align: "left"
                    }
                    },
                    grid: {
                    right: "5%",
                    top: "20%",
                    left: "5%",
                    bottom: "5%",
                    containLabel: true
                    },
                    xAxis: {
                    type: "category",
                    boundaryGap: true,
                    data: ["济南商管","济南商管",'济南商管','济南商管','济南商管'],
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                        //	margin:15,
                        textStyle: {
                        color: "#65D5FF",
                        fontStyle: "normal",
                        fontSize: 16
                        }
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false
                    },
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                        color: "rgba(77, 128, 254, 0.2)"
                        }
                    },
                    splitLine: {
                        //坐标轴在 grid 区域中的分隔线。
                        show: true,
                        lineStyle: {
                        color: "rgba(77, 128, 254, 0.2)"
                        }
                    }
                    },
                    yAxis: [
                    {
                        type: "value",
                        splitNumber: 3,
                        axisLabel: {
                        textStyle: {
                            color: "#65D5FF",
                            fontStyle: "normal",
                            fontSize: 16
                        }
                        },
                        axisLine: {
                        show: false
                        },
                        axisTick: {
                        show: false
                        },
                        splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(77, 128, 254, 0.2)"
                        }
                        }
                    }
                    ],
                    series: [
                        {
                            
                            type: "pictorialBar",
                            barWidth: "60%",
                            stack: "总量",
                            label: {
                                normal: {
                                show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(48, 236, 166, 1)" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 34, 66, 0.2)" // 100% 处的颜色
                                    }
                                    ],
                                    globalCoord: false // 缺省为 false
                                } //渐变颜色
                                }
                            },
                            symbol:
                                "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

                            data: [23,84,101,74,87]
                    },  
                    
                    ],
            };
            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
        rightBottomEchart(){
            let myChart = this.$echarts.init(document.getElementById('rightBottomEchart'));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '18%',
                    left: '25%',
                    bottom: '25%',
                },
                xAxis: [{
                    type: 'category',
                    data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#e2e9ff',
                        textStyle: {
                            fontSize: 14
                        },
                        interval:0,
                        rotate:-30
                    },
                }],
                yAxis: [{
                    name: '单位：万元',
                    axisLabel: {
                        formatter: '{value}',
                        color: '#e2e9ff',
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(255,255,255,1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: [5000, 2600, 1300, 1300, 1250, 1500],
                    barWidth: '0.14rem',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [6, 6, 6, 6],
                            shadowColor: 'rgba(0,160,221,1)',
                            shadowBlur: 2,
                        }
                    },
                }]
            };
            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
        centerTop(){
            let myChart = this.$echarts.init(document.getElementById('map'));
            let geoCoordMap = [
                {name: '河北', value: [115.21 , 38.44],labe:'鲁能泰山都会城三区房地产开发项目,文安庄园三期'},
                {name: '上海', value: [121.46 , 31.28],labe:'千岛湖2-3/6地块项目,海阳鲁能项目'},
                {name: '山东', value: [118.38, 37.37, 142],labe:'鲁能领秀城花山峪B地块'},
                {name: '四川', value: [103.36 , 30.65],labe:'千宜宾BQ31地块'},
                {name: '福建', value:[118.31 , 26.07],labe:'三亚红塘湾安居房'},
                {name: '广东', value: [113.98 , 22.82],labe:'重庆鲁能城四期'},
                {name: '黑龙江', value: [128.34 , 47.05],labe:'重庆鲁能泰山7号四期23街区'},
            ];
            let option ={
                tooltip: {
                    formatter: function (params) {
                        return params.data.labe
                    },
                    trigger: 'item'
                },
                geo: {
                    map: 'china',
                    roam: true, //是否需要缩放地图
                    top:'12%',
                    itemStyle: {
                        normal: {
                            show:true,
                            areaColor: '#01215c',
                            borderWidth: 1,//设置外层边框
                            borderColor:'#9ffcff',
                            shadowColor: 'rgba(0,54,255, 1)',
                            shadowBlur: 30,
                        },
                        emphasis:{
                            areaColor: '#01215c',
                            shadowColor: '#fff',
                        }
                    },
                    label: {      //高亮时  字体颜色                       
                        emphasis: {
                            textStyle: {
                                color: '#fff',
                                show: true
                            }
                        }
                    },
                },
                series: [
                    {
                        name: '散点', // series名称
                        //type: 'effectScatter', // series图表类型 散点图类型
                        type: 'scatter',
                        coordinateSystem: 'geo', // series坐标系类型
                        data: geoCoordMap,
                        itemStyle: {
                            normal: {
                                type: 'radial',
                                color: 'rgba(14,245,209,1)'
                            }
                        },
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
        centerBottom(){
            let myChart = this.$echarts.init(document.getElementById('centerbottom'));
            let line1 = [123, 234, 321, 121, 123, 232, 232,123, 232, 232,123,343]
            let line2 = [231, 234, 343, 231, 121, 165,221, 231, 234, 343, 231, 121]
            let option = {
                grid: {
                    x:40,
                    y:10,
                    x2:35,
                    y2:0, //距离  底部的长度
                    containLabel: true
                },
                tooltip:{
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },  
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine:{
                        show:false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',  //更改坐标轴文字颜色
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',  //更改坐标轴文字颜色
                        }
                    },
                axisLine:{
                    show:false
                },
                splitLine:{
                    show:false
                },
                axisTick: {
                    show: false
                },
                },
                series: [
                {
                    data: line1,
                    type: 'line',
                    symbol:'circle',
                    symbolSize:8,
                    smooth: true,//变圆
                    itemStyle:{
                        normal:{
                            color:'pink', //折点颜色
                            lineStyle:{
                                color:'pink' //折线颜色
                            }
                        }
                    },
                    areaStyle: {  // 折线图 颜色渐变
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0, color: '#9188D9' // 0% 处的颜色
                                },
                                {
                                    offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    }
                },
                {
                    data: line2,
                    type: 'line',
                    symbol:'circle',
                    smooth: true,//变圆
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            color:'#2489EF', //折点颜色
                            lineStyle:{
                                color:'#2489EF' //折线颜色
                            }
                        }
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            };

            myChart.setOption(option);
            window.addEventListener('resize',() =>{
                myChart.resize();
            });
        },
    },
    mounted(){
        this.leftTopEchart();
        this.leftCenterEchart();
        this.leftBottomEchart();
        this.rightTopEchart();
        this.rightCenterEchart();
        this.rightBottomEchart();
        this.centerTop();
        this.centerBottom();
    }
}

</script>
<style scoped>
    .mainContents{
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
    }
    .leftContent,.rightContent{
        display: flex;
        flex-flow: column nowrap;
        width: 27%;
        height: 100%;
        overflow: hidden;
    }
    .centerContent{
        display: flex;
        flex-flow: column nowrap;
        width: 46%;
        height: 100%;
        overflow: hidden;
    }
    .leftTop,.leftCenter,.leftBottom,.rightTop,.rightCenter,.rightBottom{
        height: 33%;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        overflow: hidden;
    }
    .navbar{
        width:100%;
        height:0.5rem;
        display:flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .leftTopEcharts,.leftCenterEcharts,.leftBottomEcharts,
    .rightTopEcharts,.rightCenterEcharts,.rightBottomEcharts{
        width: 100%;
        height: calc(100% - 0.4rem);
    }
</style>